import { useCallback } from "react";
import style from "../../style/OrderDetails.module.scss";
import { useHistory, useLocation } from "react-router-dom";
export default function OrderDetails(props) {
  // console.log(props);
  let history = useHistory();
  // console.log(history);
  let location = useLocation();
  // console.log(location.state.name, "-----------");
  let data = location.state.name;
  const returnAction = useCallback(() => {
    history.goBack();
  }, [history]);
  return (
    <>
      <div className={style.details}>
        <h1 className={style.state}>
          订单状态: &nbsp;&nbsp;<span>交易完成</span>
        </h1>
        <table className={style.Ordertable}>
          <tbody>
            <tr>
              <td className={style.title}>订单编号：</td>
              <td>{data.key}</td>
              <td className={style.title}>商品金额：</td>
              <td>{data.productAmount}</td>
            </tr>
            <tr>
              <td className={style.title}>下单时间：</td>
              <td>{data.time}</td>
              <td className={style.title}>配送费用：</td>
              <td>{data.deliveryFee}</td>
            </tr>
            <tr>
              <td className={style.title}>支付方式：</td>
              <td>{data.paymentMethod}</td>
              <td className={style.title}>实付金额：</td>
              <td>{data.payAmount}</td>
            </tr>
            <tr>
              <td className={style.title}>收货地址：</td>
              <td>
                {data.AddressId.place} &nbsp;&nbsp;{data.AddressId.name}{" "}
                &nbsp;&nbsp;
                {data.AddressId.phone}
              </td>
              <td className={style.title}>预约时间：</td>
              <td>{data.appointmentTime}</td>
            </tr>
          </tbody>
        </table>
        <table className={style.commodityTable}>
          <tbody>
            <tr>
              <td>商品</td>
              <td>单价</td>
              <td>数量</td>
              <td>商品总价</td>
            </tr>
            {data.orderItem.map((item, index) => {
              // console.log(item);
              return (
                <tr key={index}>
                  <td className={style.name}>
                    <img src={item.img} alt="" />
                    <span>{item.name}</span>
                  </td>
                  <td>
                    ￥{item.unit_price}/{item.unit}
                  </td>
                  <td>{item.num}</td>
                  <td>{item.total_price}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <button className={style.return} onClick={returnAction}>
        返回
      </button>
    </>
  );
}
